<template>
  <Modal
    :visible="visible"
    title="资源交易管理使用指南"
    width="900px"
    :footer="null"
    :destroy-on-close="true"
    @update:visible="(val) => emit('update:visible', val)"
  >
    <div class="trading-guide">
      <div class="guide-nav">
        <Tabs v-model:activeKey="activeTab" type="card">
          <TabPane key="overview" tab="功能概述">
            <div class="guide-content">
              <h3>💰 交易管理功能概述</h3>
              <p>
                资源交易管理是资源自我管理的重要组成部分，帮助您配置和管理资源的交易相关功能。
              </p>

              <div class="concept-diagram">
                <div class="diagram-title">交易管理核心概念</div>
                <div class="diagram-content">
                  <div class="concept-item">
                    <Icon
                      icon="ant-design:dollar-outlined"
                      class="concept-icon"
                    />
                    <div class="concept-info">
                      <h4>定价策略</h4>
                      <p>配置资源的成本、价格和订阅方案</p>
                    </div>
                  </div>
                  <div class="concept-item">
                    <Icon
                      icon="ant-design:team-outlined"
                      class="concept-icon"
                    />
                    <div class="concept-info">
                      <h4>交易对象</h4>
                      <p>管理与资源进行交易的合作对象</p>
                    </div>
                  </div>
                  <div class="concept-item">
                    <Icon
                      icon="ant-design:setting-outlined"
                      class="concept-icon"
                    />
                    <div class="concept-info">
                      <h4>交易规则</h4>
                      <p>定义交易过程中的业务规则和条件</p>
                    </div>
                  </div>
                  <div class="concept-item">
                    <Icon
                      icon="ant-design:history-outlined"
                      class="concept-icon"
                    />
                    <div class="concept-info">
                      <h4>交易历史</h4>
                      <p>查看和管理交易记录</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="feature-list">
                <h4>核心功能特性</h4>
                <ul>
                  <li>
                    <strong>灵活定价</strong
                    >：支持多种定价模式，包括一次性购买和订阅模式
                  </li>
                  <li>
                    <strong>成本分析</strong
                    >：自动计算总成本和利润率，帮助优化定价策略
                  </li>
                  <li><strong>合作管理</strong>：管理不同类型的交易合作对象</li>
                  <li><strong>规则引擎</strong>：支持复杂的交易规则配置</li>
                  <li><strong>历史追踪</strong>：完整的交易记录和统计分析</li>
                </ul>
              </div>
            </div>
          </TabPane>

          <TabPane key="usage" tab="使用步骤">
            <div class="guide-content">
              <h3>📋 使用步骤</h3>

              <Steps :current="currentStep" direction="vertical" size="small">
                <Step
                  title="进入交易管理"
                  description="在资源自我管理页面点击交易管理标签页"
                >
                  <div class="step-content">
                    <p>1. 选择目标资源，点击"自我管理"按钮</p>
                    <p>2. 在自我管理页面切换到"交易管理"标签页</p>
                    <p>3. 点击"配置交易"按钮打开交易管理界面</p>
                    <div class="step-image">
                      <div class="mock-trading-tab">
                        <div class="tab-item active">交易管理</div>
                        <div class="tab-item">能力管理</div>
                        <div class="tab-item">事件联动</div>
                      </div>
                    </div>
                  </div>
                </Step>

                <Step
                  title="配置定价策略"
                  description="设置资源的基础成本、价格和订阅方案"
                >
                  <div class="step-content">
                    <p>1. 在"定价策略"标签页中填写基础成本</p>
                    <p>2. 设置标准价格和优惠价格</p>
                    <p>3. 配置月订阅和年订阅价格</p>
                    <p>4. 查看定价预览和成本分析</p>
                    <p>5. 点击"保存定价"按钮保存配置</p>
                    <div class="step-image">
                      <div class="mock-pricing-form">
                        <div class="form-row">
                          <span>基础成本：</span>
                          <span class="price">¥100</span>
                        </div>
                        <div class="form-row">
                          <span>标准价格：</span>
                          <span class="price">¥200</span>
                        </div>
                        <div class="form-row">
                          <span>利润率：</span>
                          <span class="profit">25%</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </Step>

                <Step
                  title="管理交易对象"
                  description="添加和管理与资源进行交易的合作对象"
                >
                  <div class="step-content">
                    <p>1. 切换到"交易对象"标签页</p>
                    <p>2. 点击"添加合作对象"按钮</p>
                    <p>3. 填写对象名称、类型和描述</p>
                    <p>4. 设置对象状态（活跃/暂停）</p>
                    <p>5. 保存并管理合作对象列表</p>
                    <div class="step-image">
                      <div class="mock-partners-list">
                        <div class="partner-item">
                          <IconifyIcon icon="ant-design:laptop-outlined" />
                          <span>酒店管理系统</span>
                          <Tag color="green">活跃</Tag>
                        </div>
                        <div class="partner-item">
                          <IconifyIcon icon="ant-design:service-outlined" />
                          <span>清洁服务团队</span>
                          <Tag color="green">活跃</Tag>
                        </div>
                      </div>
                    </div>
                  </div>
                </Step>

                <Step
                  title="配置交易规则"
                  description="定义交易过程中的业务规则和条件"
                >
                  <div class="step-content">
                    <p>1. 切换到"交易规则"标签页</p>
                    <p>2. 点击"添加规则"按钮</p>
                    <p>3. 选择规则类型（定价/折扣/验证/通知）</p>
                    <p>4. 填写规则名称和描述</p>
                    <p>5. 设置规则状态并保存</p>
                    <div class="step-image">
                      <div class="mock-rules-list">
                        <div class="rule-item">
                          <IconifyIcon icon="ant-design:percentage-outlined" />
                          <span>VIP客户折扣</span>
                          <Tag color="green">启用</Tag>
                        </div>
                        <div class="rule-item">
                          <IconifyIcon icon="ant-design:dollar-outlined" />
                          <span>批量预订优惠</span>
                          <Tag color="green">启用</Tag>
                        </div>
                      </div>
                    </div>
                  </div>
                </Step>

                <Step
                  title="查看交易历史"
                  description="查看和管理交易记录，导出交易数据"
                >
                  <div class="step-content">
                    <p>1. 切换到"交易历史"标签页</p>
                    <p>2. 选择日期范围筛选记录</p>
                    <p>3. 查看交易详情和状态</p>
                    <p>4. 点击"导出记录"下载交易数据</p>
                    <p>5. 分析交易趋势和效果</p>
                    <div class="step-image">
                      <div class="mock-history-table">
                        <div class="table-row">
                          <span>酒店管理系统</span>
                          <Tag color="blue">订阅</Tag>
                          <span class="amount">¥200</span>
                          <span>2024-01-20</span>
                        </div>
                        <div class="table-row">
                          <span>清洁服务团队</span>
                          <Tag color="green">服务</Tag>
                          <span class="amount">¥50</span>
                          <span>2024-01-19</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </Step>
              </Steps>

              <div class="step-navigation">
                <Button @click="prevStep" :disabled="currentStep === 0">
                  <IconifyIcon icon="ant-design:left-outlined" />
                  上一步
                </Button>
                <Button
                  type="primary"
                  @click="nextStep"
                  :disabled="currentStep === 4"
                >
                  下一步
                  <IconifyIcon icon="ant-design:right-outlined" />
                </Button>
              </div>
            </div>
          </TabPane>

          <TabPane key="examples" tab="使用示例">
            <div class="guide-content">
              <h3>🎯 使用示例</h3>

              <Tabs v-model:activeKey="exampleTab" type="card">
                <TabPane key="hotel" tab="酒店房间">
                  <div class="example-content">
                    <h4>🏨 酒店房间交易配置示例</h4>
                    <p>为酒店房间配置完整的交易管理功能</p>

                    <div class="example-config">
                      <div class="config-section">
                        <h5>定价策略配置</h5>
                        <div class="config-item">
                          <strong>基础成本：</strong>¥80（房间清洁、水电费）
                        </div>
                        <div class="config-item">
                          <strong>运营成本：</strong>¥20（人工、维护）
                        </div>
                        <div class="config-item">
                          <strong>标准价格：</strong>¥200（日常价格）
                        </div>
                        <div class="config-item">
                          <strong>优惠价格：</strong>¥150（淡季价格）
                        </div>
                        <div class="config-item">
                          <strong>月订阅：</strong>¥1800（长期租客）
                        </div>
                      </div>

                      <div class="config-section">
                        <h5>交易对象配置</h5>
                        <div class="config-item">
                          <strong>酒店管理系统：</strong
                          >核心业务系统，处理预订和结算
                        </div>
                        <div class="config-item">
                          <strong>清洁服务团队：</strong>客房清洁服务，按次收费
                        </div>
                        <div class="config-item">
                          <strong>客户预订系统：</strong
                          >第三方预订平台，佣金分成
                        </div>
                      </div>

                      <div class="config-section">
                        <h5>交易规则配置</h5>
                        <div class="config-item">
                          <strong>VIP客户折扣：</strong>VIP客户享受9折优惠
                        </div>
                        <div class="config-item">
                          <strong>批量预订优惠：</strong
                          >批量预订超过10间享受8折优惠
                        </div>
                        <div class="config-item">
                          <strong>长期租客优惠：</strong>月租客户享受额外5%折扣
                        </div>
                      </div>
                    </div>
                  </div>
                </TabPane>

                <TabPane key="equipment" tab="设备资源">
                  <div class="example-content">
                    <h4>🔧 设备资源交易配置示例</h4>
                    <p>为设备资源配置租赁和维修交易功能</p>

                    <div class="example-config">
                      <div class="config-section">
                        <h5>定价策略配置</h5>
                        <div class="config-item">
                          <strong>基础成本：</strong>¥500（设备折旧、维护）
                        </div>
                        <div class="config-item">
                          <strong>运营成本：</strong>¥100（运输、安装）
                        </div>
                        <div class="config-item">
                          <strong>日租价格：</strong>¥200（按天租赁）
                        </div>
                        <div class="config-item">
                          <strong>月租价格：</strong>¥3000（按月租赁）
                        </div>
                        <div class="config-item">
                          <strong>维修价格：</strong>¥150（每次维修）
                        </div>
                      </div>

                      <div class="config-section">
                        <h5>交易对象配置</h5>
                        <div class="config-item">
                          <strong>设备管理系统：</strong>设备状态监控和调度
                        </div>
                        <div class="config-item">
                          <strong>维修服务团队：</strong>设备维修和保养服务
                        </div>
                        <div class="config-item">
                          <strong>租赁客户：</strong>设备使用客户
                        </div>
                      </div>

                      <div class="config-section">
                        <h5>交易规则配置</h5>
                        <div class="config-item">
                          <strong>长期租赁优惠：</strong>月租客户享受8折优惠
                        </div>
                        <div class="config-item">
                          <strong>维修包月：</strong>维修包月客户享受7折优惠
                        </div>
                        <div class="config-item">
                          <strong>设备损坏赔偿：</strong>设备损坏按原价赔偿
                        </div>
                      </div>
                    </div>
                  </div>
                </TabPane>

                <TabPane key="service" tab="服务资源">
                  <div class="example-content">
                    <h4>🎯 服务资源交易配置示例</h4>
                    <p>为服务资源配置咨询和培训交易功能</p>

                    <div class="example-config">
                      <div class="config-section">
                        <h5>定价策略配置</h5>
                        <div class="config-item">
                          <strong>基础成本：</strong>¥300（专家时间、材料）
                        </div>
                        <div class="config-item">
                          <strong>运营成本：</strong>¥50（场地、设备）
                        </div>
                        <div class="config-item">
                          <strong>咨询价格：</strong>¥500（每小时咨询）
                        </div>
                        <div class="config-item">
                          <strong>培训价格：</strong>¥2000（每次培训）
                        </div>
                        <div class="config-item">
                          <strong>套餐价格：</strong>¥8000（10次咨询套餐）
                        </div>
                      </div>

                      <div class="config-section">
                        <h5>交易对象配置</h5>
                        <div class="config-item">
                          <strong>客户管理系统：</strong>客户信息和服务记录
                        </div>
                        <div class="config-item">
                          <strong>专家团队：</strong>提供咨询和培训服务
                        </div>
                        <div class="config-item">
                          <strong>培训场地：</strong>提供培训场地和设备
                        </div>
                      </div>

                      <div class="config-section">
                        <h5>交易规则配置</h5>
                        <div class="config-item">
                          <strong>套餐优惠：</strong>购买套餐享受8折优惠
                        </div>
                        <div class="config-item">
                          <strong>推荐奖励：</strong>推荐新客户享受10%返现
                        </div>
                        <div class="config-item">
                          <strong>续费优惠：</strong>续费客户享受额外5%折扣
                        </div>
                      </div>
                    </div>
                  </div>
                </TabPane>
              </Tabs>
            </div>
          </TabPane>

          <TabPane key="faq" tab="常见问题">
            <div class="guide-content">
              <h3>❓ 常见问题</h3>

              <Collapse v-model:activeKey="activeKeys">
                <CollapsePanel key="1" header="如何设置合理的定价策略？">
                  <div class="faq-content">
                    <p>设置合理的定价策略需要考虑以下因素：</p>
                    <ul>
                      <li>
                        <strong>成本分析</strong>：准确计算基础成本和运营成本
                      </li>
                      <li><strong>市场调研</strong>：了解同类资源的市场价格</li>
                      <li><strong>目标利润</strong>：设定合理的利润率目标</li>
                      <li><strong>客户价值</strong>：考虑客户的价值感知</li>
                      <li><strong>竞争策略</strong>：制定有竞争力的价格策略</li>
                    </ul>
                    <p>建议使用定价预览功能，实时查看成本分析和利润率。</p>
                  </div>
                </CollapsePanel>

                <CollapsePanel key="2" header="如何管理不同类型的交易对象？">
                  <div class="faq-content">
                    <p>交易对象管理包括以下类型：</p>
                    <ul>
                      <li>
                        <strong>系统对象</strong
                        >：如酒店管理系统、设备管理系统等
                      </li>
                      <li>
                        <strong>服务对象</strong
                        >：如清洁服务团队、维修服务团队等
                      </li>
                      <li>
                        <strong>客户对象</strong>：如客户预订系统、第三方平台等
                      </li>
                      <li>
                        <strong>供应商对象</strong>：如设备供应商、材料供应商等
                      </li>
                    </ul>
                    <p>每种类型都有不同的交易模式和结算方式，需要分别配置。</p>
                  </div>
                </CollapsePanel>

                <CollapsePanel key="3" header="交易规则的作用是什么？">
                  <div class="faq-content">
                    <p>交易规则用于自动化交易过程，包括：</p>
                    <ul>
                      <li><strong>定价规则</strong>：根据条件自动调整价格</li>
                      <li><strong>折扣规则</strong>：自动应用折扣和优惠</li>
                      <li><strong>验证规则</strong>：验证交易条件和限制</li>
                      <li><strong>通知规则</strong>：交易完成后自动发送通知</li>
                    </ul>
                    <p>规则可以大大提高交易效率，减少人工干预。</p>
                  </div>
                </CollapsePanel>

                <CollapsePanel key="4" header="如何分析交易历史数据？">
                  <div class="faq-content">
                    <p>交易历史分析可以帮助您：</p>
                    <ul>
                      <li><strong>收入分析</strong>：了解收入来源和趋势</li>
                      <li>
                        <strong>客户分析</strong>：识别高价值客户和消费模式
                      </li>
                      <li><strong>产品分析</strong>：了解哪些产品最受欢迎</li>
                      <li><strong>时间分析</strong>：发现销售旺季和淡季</li>
                      <li>
                        <strong>效果评估</strong>：评估定价策略和促销活动效果
                      </li>
                    </ul>
                    <p>建议定期导出交易数据，进行深入的数据分析。</p>
                  </div>
                </CollapsePanel>

                <CollapsePanel key="5" header="如何优化交易管理配置？">
                  <div class="faq-content">
                    <p>优化交易管理配置的建议：</p>
                    <ul>
                      <li>
                        <strong>定期审查</strong>：定期审查定价策略和交易规则
                      </li>
                      <li>
                        <strong>数据分析</strong>：基于交易历史数据调整配置
                      </li>
                      <li>
                        <strong>客户反馈</strong>：收集客户反馈，优化交易体验
                      </li>
                      <li><strong>市场变化</strong>：根据市场变化调整策略</li>
                      <li>
                        <strong>自动化</strong>：尽可能使用规则自动化交易过程
                      </li>
                    </ul>
                    <p>持续优化是提高交易效率的关键。</p>
                  </div>
                </CollapsePanel>
              </Collapse>
            </div>
          </TabPane>
        </Tabs>

        <div class="guide-footer">
          <Button @click="handleClose">关闭指南</Button>
          <Button type="primary" @click="handleStart">开始使用</Button>
        </div>
      </div>
    </div>
  </Modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {
  Modal,
  Tabs,
  TabPane,
  Steps,
  Step,
  Button,
  Collapse,
  CollapsePanel,
  Tag,
  message,
} from 'ant-design-vue';
import { IconifyIcon } from '@vben/icons';

// Props
const props = defineProps<{
  visible: boolean;
}>();

// Emits
const emit = defineEmits<{
  'update:visible': [value: boolean];
}>();

// 响应式数据
const activeTab = ref('overview');
const currentStep = ref(0);
const exampleTab = ref('hotel');
const activeKeys = ref(['1']);

// 步骤导航
const nextStep = () => {
  if (currentStep.value < 4) {
    currentStep.value++;
  }
};

const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--;
  }
};

// 操作处理
const handleClose = () => {
  emit('update:visible', false);
};

const handleStart = () => {
  message.success('开始使用资源交易管理功能！');
  emit('start-usage');
  emit('update:visible', false);
};
</script>

<style lang="less" scoped>
.trading-guide {
  .guide-nav {
    .guide-content {
      h3 {
        color: #1890ff;
        margin-bottom: 16px;
        font-size: 18px;
        font-weight: 600;
      }

      p {
        color: #666;
        line-height: 1.6;
        margin-bottom: 16px;
      }

      .concept-diagram {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;

        .diagram-title {
          font-weight: 600;
          margin-bottom: 16px;
          color: #333;
        }

        .diagram-content {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 16px;

          .concept-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: white;
            border-radius: 6px;
            border: 1px solid #e8e8e8;

            .concept-icon {
              font-size: 24px;
              color: #1890ff;
            }

            .concept-info {
              h4 {
                margin: 0 0 4px 0;
                font-size: 14px;
                font-weight: 600;
              }

              p {
                margin: 0;
                font-size: 12px;
                color: #666;
              }
            }
          }
        }
      }

      .feature-list {
        background: #f0f8ff;
        border-radius: 8px;
        padding: 16px;
        margin: 20px 0;

        h4 {
          color: #1890ff;
          margin-bottom: 12px;
        }

        ul {
          margin: 0;
          padding-left: 20px;

          li {
            margin-bottom: 8px;
            color: #333;
          }
        }
      }

      .step-content {
        p {
          margin-bottom: 8px;
          color: #333;
        }

        .step-image {
          margin: 16px 0;
          padding: 16px;
          background: #f8f9fa;
          border-radius: 6px;
          border: 1px dashed #d9d9d9;

          .mock-trading-tab {
            display: flex;
            gap: 8px;

            .tab-item {
              padding: 8px 16px;
              border: 1px solid #d9d9d9;
              border-radius: 4px;
              background: #f5f5f5;
              font-size: 12px;

              &.active {
                background: #1890ff;
                color: white;
                border-color: #1890ff;
              }
            }
          }

          .mock-pricing-form {
            .form-row {
              display: flex;
              justify-content: space-between;
              padding: 8px 0;
              border-bottom: 1px solid #f0f0f0;

              .price {
                color: #1890ff;
                font-weight: 600;
              }

              .profit {
                color: #52c41a;
                font-weight: 600;
              }
            }
          }

          .mock-partners-list {
            .partner-item {
              display: flex;
              align-items: center;
              gap: 8px;
              padding: 8px 0;
              border-bottom: 1px solid #f0f0f0;
            }
          }

          .mock-rules-list {
            .rule-item {
              display: flex;
              align-items: center;
              gap: 8px;
              padding: 8px 0;
              border-bottom: 1px solid #f0f0f0;
            }
          }

          .mock-history-table {
            .table-row {
              display: grid;
              grid-template-columns: 2fr 1fr 1fr 1fr;
              gap: 8px;
              padding: 8px 0;
              border-bottom: 1px solid #f0f0f0;
              align-items: center;

              .amount {
                color: #1890ff;
                font-weight: 600;
              }
            }
          }
        }
      }

      .step-navigation {
        display: flex;
        justify-content: space-between;
        margin-top: 24px;
        padding-top: 16px;
        border-top: 1px solid #f0f0f0;
      }

      .example-content {
        h4 {
          color: #1890ff;
          margin-bottom: 12px;
        }

        .example-config {
          .config-section {
            margin-bottom: 24px;
            padding: 16px;
            background: #f8f9fa;
            border-radius: 6px;

            h5 {
              color: #333;
              margin-bottom: 12px;
              font-weight: 600;
            }

            .config-item {
              margin-bottom: 8px;
              padding: 8px 0;
              border-bottom: 1px solid #e8e8e8;

              strong {
                color: #1890ff;
              }
            }
          }
        }
      }

      .faq-content {
        p {
          margin-bottom: 12px;
        }

        ul {
          margin: 0;
          padding-left: 20px;

          li {
            margin-bottom: 8px;
            color: #333;
          }
        }
      }
    }

    .guide-footer {
      display: flex;
      justify-content: space-between;
      margin-top: 24px;
      padding-top: 16px;
      border-top: 1px solid #f0f0f0;
    }
  }
}
</style>
